<%inherit file="/base/index.html" />

<%namespace file="/base/javascriptDefs.html" name="javascriptDefs" \
import="getCharCodeScript, translateOrthographyScript"/>

<%def name="writeJavascriptToHead()">
    ${getCharCodeScript()}
    ${translateOrthographyScript()}
</%def>

<%def name="heading()">
    <h1 class="heading">Object Language Orthographies</h1>
</%def>

<p>This page provides more details about the object language orthographies.</p>

<p>In particular, it allows users to:</p>

<ul>
    <li>
        <a href='#testconvert'>
            test how well the system converts strings from one orthography to \
            another
        </a>
    </li>
    <li>
        <a href='#entergraphs'>
            try entering the graphs of the orthographies
        </a>
    </li>
</ul>


<%
options = [(x, c.OLOrthographies[x][0]) for x in c.OLOrthographies if \
          c.OLOrthographies[x][0] and c.OLOrthographies[x][1]]
%>

<a name='testconvert'></a>
<h1 class="heading margintop">Test Orthography Conversion</h1>

<p>Input Orthography</p>

${h.select(name='inputOrthography', id='inputOrthography', \
                selected_values="", options=options, tabindex=1)}

<p>Output Orthography</p>

${h.select(name='outputOrthography', id='outputOrthography', \
                selected_values="", options=options, tabindex=2)}

<p>Enter some text in the box below using the input orthography selected above.
</p>

<textarea id='input' name='input' rows='6' style='width:100%;' \
          tabindex='3'></textarea>

<p>Press <a onclick='translateOrthography();' \
class="buttonLink" title="Translate user-entered text from the input to the \
output orthography">Translate</a> to translate your input text into the output
orthography selected above.  Your translated text will be displayed below.</p>

<div id='outputorthographydiv'>
</div>



<% tabindex = 3 %>
<a name='entergraphs'></a>
% for OLOrthography in c.OLOrthographies:
    % if c.OLOrthographies[OLOrthography][1]:
    <h1 class="heading margintop">${c.OLOrthographies[OLOrthography][0]}</h1>
      <p>See if you can enter the graphs of this orthography.  For each row
      in the following table, try entering in the 'Input' column the graph you
      see in the 'Graph' column.  The unicode character code points of your
      input will be displayed in the 'Input Codes' column.  If the code points
      of your input match those of the graph (see the 'Graph Codes' column),
      then a green checkmark will appear.  Otherwise, a red x mark will appear.
      </p>
        <table class='infoTable quarter'>
            <tr><th>Graph</th><th>Graph Codes</th><th>Input</th><th>Input Codes</th></tr>
            % for index in range(len(c.OLOrthographies[OLOrthography][2])):
            <%
                inputID = 'input_%s_%s' % (OLOrthography[-1], str(index))
                divID = 'div_%s_%s' % (OLOrthography[-1], str(index))
                compareID = 'compare_%s_%s' % (OLOrthography[-1], str(index))
                tabindex += 1;
            %>
            <tr>
                <td>
                    ${c.OLOrthographies[OLOrthography][2][index]}
                </td>
                <td id="${compareID}">
                    ${c.OLOrthographies[OLOrthography][3][index]}
                </td>
                <td>
                    <input id="${inputID}" name="${inputID}" maxlength="255" \
                        type="text" class="shortinput" \
                        onkeyup="getCharCode('${inputID}', '${divID}', \
                        '${compareID}');" tabindex="${tabindex}" />
                </td>
                <td>
                    <div id="${divID}">
                    </div>
                </td>
            </tr>
            % endfor
        </table>
    % endif
% endfor